/*
 * @Description: Echarts图表模型js
 * @Author: Huang Junjie
 * @Date: 2021-06-02 10:40:43
 * @LastEditTime: 2021-06-24 11:57:53
 * @LastEditors: Huang Junjie
 */
// 引入echarts
const echarts = require('echarts')

// 缺陷数量 - 柱状图（暂不使用）
export function ColumnChart01(myChart, xAxisArr, data) {
  myChart.clear()
  myChart.setOption({
    grid: {
      top: 32,
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true
    },
    legend: {
      right: 0,
      top: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35,
      textStyle: {
        color: '#ffffff'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: xAxisArr,
      type: 'category',
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 1
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      }
    },
    yAxis: {
      show: true,
      splitNumber: 10,
      min: 0,
      max: 180,
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        lineStyle: {
          width: 0
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.38
        }
      }
    },
    series: [
      {
        data: data,
        type: 'bar',
        barWidth: '30px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#0862a2' },
                { offset: 1, color: '#0580d0' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            )
          }
        }
      }
    ]
  })

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 500)
}

// 缺陷数量排名 - 漏斗图
export function funnelChart01(myChart, legend, data) {
  myChart.clear()
  myChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}'
    },
    legend: {
      show: false,
      orient: 'vertical',
      right: 15,
      top: 20,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 32,
      textStyle: {
        color: '#ffffff'
      },
      data: legend
    },
    label: {
      normal: {
        show: true,
        position: 'inner',
        textStyle: {
          fontSize: '14px',
          color: '#0c265f'
        },
        formatter: '{a}'
      }
    },
    series: [
      {
        name: '缺陷分类排名',
        type: 'funnel',
        left: 45,
        top: 10,
        bottom: 10,
        width: '70%',
        min: 0,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          position: 'inside',
          formatter: '{c}',
          color: '#fff'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            position: 'inside',
            formatter: '{b}: {c}'
          }
        },
        data: data
      },
      {
        name: '缺陷分类排名',
        type: 'funnel',
        left: 45,
        top: 10,
        bottom: 10,
        width: '70%',
        min: 0,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          formatter: '{b}',
          color: '#fff'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        data: data
      }
    ]
  })

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }, 500)
}
